<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片验证码</title>
    <style>
        body {
            text-align: center
        }

        canvas {
            border: 1px solid greenyellow;
        }
    </style>
</head>

<body>
<!--<a id="changeImg" style="width:120px;height:40px;display:inline-block;">-->
    <!--<canvas id="canvas" width="120" height="40"></canvas>-->
<!--</a>-->
<div style="width: 300px;height: 300px;margin-top:200px">
    <canvas id="canvas2" width="120" height="40"></canvas>
    <a href="#" id="changeImg2">看不清，换一张</a>
</div>

<script>
    /**生成一个随机数**/
    /*Math.floor:向下取整*/
    /*math.random:0~1的随机数*/
    function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
    /**生成一个随机色**/
    function randomColor(min, max) {
        var r = randomNum(min, max);
        var g = randomNum(min, max);
        var b = randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
    drawPic(); //初始化
    document.getElementById("changeImg").onclick = function(e) {
        /*e.preventDefault();*/
        /*阻止a标签的默认的点击事件*/
        drawPic();
    }

    /**绘制验证码图片**/
    function drawPic() {
        var canvas = document.getElementById("canvas");
        var width = canvas.width;
        var height = canvas.height; //获取高度
        var ctx = canvas.getContext('2d');
        ctx.textBaseline = 'bottom'; //文本基线是 em 方框的底端

        /**绘制背景色**/
        ctx.fillStyle = randomColor(180, 240); //颜色若太深可能导致看不清
        ctx.fillRect(0, 0, width, height); //绘制一个填充的矩形
        /**绘制文字**/
        var str = 'ABCDEFGHIJKLMNOPQRSTWXYqwertuyuiopasdfghjklzxcvbnm123456789';
        for(var i = 0; i < 4; i++) {
            var txt = str[randomNum(0, str.length)];
            ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
            ctx.font = randomNum(15, 40) + 'px SimHei'; //随机生成字体大小
            var x = 10 + i * 25;
            var y = randomNum(25, 45);
            var deg = randomNum(-45, 45);
            //修改坐标原点和旋转角度
            ctx.translate(x, y);
            ctx.rotate(deg * Math.PI / 180);
            ctx.fillText(txt, 0, 0);
            //恢复坐标原点和旋转角度
            ctx.rotate(-deg * Math.PI / 180);
            ctx.translate(-x, -y);
        }
        /**绘制干扰线**/
        for(var i = 0; i < 3; i++) {
            ctx.strokeStyle = randomColor(40, 180); //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
            ctx.beginPath();
            ctx.moveTo(randomNum(0, width), randomNum(0, height));
            ctx.lineTo(randomNum(0, width), randomNum(0, height));
            ctx.stroke();
        }
        /**绘制干扰点**/
        for(var i = 0; i < 2; i++) {
            ctx.fillStyle = randomColor(0, 255);
            ctx.beginPath(); //arc() 方法创建弧/曲线（用于创建圆或部分圆）。
            ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
            ctx.fill();
            /*x 圆的中心的 x 坐标。
              y 圆的中心的 y 坐标。
                   r    圆的半径。
                              sAngle    起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
                     eAngle 结束角，以弧度计。
                       counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
                      */
        }
    }
</script>
<script>
    /**生成一个随机数**/
    function randomNum(min,max){
        return Math.floor( Math.random()*(max-min)+min);
    }
    /**生成一个随机色**/
    function randomColor(min,max){
        var r = randomNum(min,max);
        var g = randomNum(min,max);
        var b = randomNum(min,max);
        return "rgb("+r+","+g+","+b+")";
    }
    drawPic();
    document.getElementById("changeImg2").onclick = function(e){
        e.preventDefault();
        drawPic();
    }

    /**绘制验证码图片**/
    function drawPic(){
        var canvas=document.getElementById("canvas2");
        var width=canvas.width;
        var height=canvas.height;
        var ctx = canvas.getContext('2d');
        ctx.textBaseline = 'bottom';

        /**绘制背景色**/
        ctx.fillStyle = randomColor(180,240); //颜色若太深可能导致看不清
        ctx.fillRect(0,0,width,height);
        /**绘制文字**/
        var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
        for(var i=0; i<4; i++){
            var txt = str[randomNum(0,str.length)];
            ctx.fillStyle = randomColor(50,160);  //随机生成字体颜色
            ctx.font = randomNum(20,40)+'px SimHei'; //随机生成字体大小
            var x = 10+i*25;
            var y = randomNum(25,45);
            var deg = randomNum(-45, 45);
            //修改坐标原点和旋转角度
            ctx.translate(x,y);
            ctx.rotate(deg*Math.PI/180);
            ctx.fillText(txt, 0,0);
            //恢复坐标原点和旋转角度
            ctx.rotate(-deg*Math.PI/180);
            ctx.translate(-x,-y);
        }
        /**绘制干扰线**/
        for(var i=0; i<1; i++){
            ctx.strokeStyle = randomColor(40,180);
            ctx.beginPath();
            ctx.moveTo( randomNum(0,width), randomNum(0,height) );
            ctx.lineTo( randomNum(0,width), randomNum(0,height) );
            ctx.stroke();
        }
        /**绘制干扰点**/
        for(var i=0; i<100; i++){
            ctx.fillStyle = randomColor(0,255);
            ctx.beginPath();
            ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);
            ctx.fill();
        }
    }
</script>
</body>

</html>